<template>
	<view>
		<view class="without"></view>
		
		<view class="myone">
			<image src="../../static/image/xinfeng.svg"></image>
			<view>我</view>
			<image src="../../static/image/xitongshezhi.svg" @click="toset"></image>
		</view>
		
		<view class="mytwo">
			<view class="up">
				<view class="head"><image src="../../static/image/touxianggenghuan.svg"></image></view>
				<view class="uptwo">
					<view class="name">名字></view>
					<view class="grade">积分:190  荣誉:20</view>
				</view>
			</view>
			<view class="down">
				<view>三级司机&ensp;></view>
				<text>升级四级司机还需:117经验值,高峰期在线20小时,总在线100小时。</text>
			</view>
		</view>
		
		<view class="mythree">
			<view class="centre"><image src="../../static/image/qianbao.svg"></image>钱包</view>
			<view class="centre"><image src="../../static/image/dingdan.svg"></image>订单</view>
			<view class="centre"><image src="../../static/image/pingjia.svg"></image>客人评价</view>
			<view class="centre"><image src="../../static/image/daibanrenwu.svg"></image>我的任务</view>
			<view class="centre"><image src="../../static/image/jifenshangcheng.svg"></image>积分商城</view>
			<view class="centre"><image src="../../static/image/peixunkaohe.svg"></image>我的考核</view>
		</view>
		
		<view class="myfour">
			<view class="too"><image src="../../static/image/zaixiankefu.svg"></image>在线客服</view>
			<view class="too"><image src="../../static/image/bangzhuzhongxin.svg"></image>帮助中心</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-component",
		methods:{
			toset(){
				uni.navigateTo({
					url:'/pages/works/set'
				})
			}
		}
	}
</script>

<style>
	page{
	    background-color: #F6F6F9;
	    }
	.without{
		width: 100%;
		height: 65rpx;
	}
	.myone{
		display: flex;
		height: 80rpx;
		width: 100%;
		font-size: 50rpx;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
	}
	.myone image{
		height: 45rpx;
		width: 45rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
	}
	.mytwo{
		width: 100%;
		height: 330rpx;
		margin-top: 10rpx;
		/* background: linear-gradient(to bottom,#F0B47D,#F4C9A2); */
		background-color: rgba(14,84,155,0.9);
		box-shadow:-2rpx -2rpx 10rpx 1rpx black;
		border-radius: 10rpx;
	}
	.down image{
		width: 40rpx;
		height: 40rpx;
	}
	.up{
		display: flex;
		height:150rpx;
		font-size: 35rpx;
		color: white;
		align-items: center;
		margin-left: 40rpx;
	}
	.uptwo{
		margin-top: 25rpx;
	}
	.head image{
		height: 125rpx;
		width: 125rpx;
		margin-right: 20rpx;
		margin-top: 25rpx;
	}
	.down{
		font-size: 28rpx;
		color: rgb(70,50,50);
		font-weight: 550;
		height: 130rpx;
		width: 95%;
		margin-top: 30rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: rgba(255,255,255,0.3);
	}
	.down text{
		font-size: 27rpx;
		color: rgb(255,250,250);
		font-weight:400;
	}
	.mythree{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 96%;
		height: 350rpx;
		margin-left: 15rpx;
		margin-top: 20rpx;
	}
	.mythree image{
		width: 60rpx;
		height: 60rpx;
	}
	.centre{
		display: flex;
		border-radius: 10rpx;
		box-shadow:-2rpx -2rpx 1rpx 1rpx gray;
		border: 2rpx solid black;
		width: 235rpx;
		height: 150rpx;
		align-items: center;
		justify-content: center;
	}
	.myfour{
		display: flex;
		flex-wrap: wrap;
		height: 200rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		justify-content: space-around;
		background-color: #EDEDED;
	}
	.too{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		width: 200rpx;
		}
	.too image{
		width: 50rpx;
		height: 50rpx;
	}
</style>